<template>
  <div>
    <el-button
      @click="handleExportModal"
      icon="el-icon-plus"
      size="mini"
      plain
      type="primary"
    >{{title}}</el-button>
    <ExcelModal ref="excelModalRef" @sure="handleSure">
    </ExcelModal>

    <el-dialog
      title="提示"
      :visible.sync="globalLoading"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="30%"
    >
      <span>{{ text }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="btnLoading" @click="handleClick" type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ExcelModal from './excelModal.vue'
import { importUserList ,fullImportUserList } from '@/api/user/user'
export default {
  props: {
    title: {
        type:String,
        require:true,
        default: '增量导入'
    },
    type:{
        type:String,
        require:true,
        default: 'import',
        validator: (value)=>{
            return ['import','fullImport'].includes(value)
        }
    }
  },
  name: 'fullImport',
  components: { ExcelModal },
  computed:{
    importComputed(){
        return this.type === 'import' ?  importUserList : fullImportUserList
    }
  },
  data () {
    return {
      limit: 100,
      text: '',
      btnLoading: false,
      // 批量上传时候的弹窗
      globalLoading: null
    }
  },
  methods: {
    handleExportModal () {
      this.$refs['excelModalRef'].open()
    },
    handleSure (list) {
      // 第一行表头不需要
      const _list = list.slice(1).map(n => {
        return {
          account: n.phone,
          idNumber: n.idCard,
          point: n.integral,
          realName: n.name,
          regionCode: n.teamId,
          sex: n.sex,
          teamName: n.team,
          workHours: n.time
        }
      })
      this.splitListImport(_list, _list.length)
      return
    },
    async splitListImport (list, total) {
      const length = list.length
      const rate = (((total - length) / total) * 100).toFixed(2)
      this.text = `导入中${rate}%,请勿关闭`
      if (!length) {
        this.btnLoading = false
        this.text = `导入成功`
        return
      }
      this.btnLoading = true
      this.globalLoading = true
      const currentList = list.slice(0, this.limit)
      const nextList = list.slice(this.limit)
      try {
        console.log(this.importComputed,'===')
        const result = await this.importComputed(currentList)
        if (result.code == 200) {
          await this.splitListImport(nextList, total)
        } else {
          this.text = `导入失败错误范围[${total - length + 1},${
            total - length + this.limit
          }],错误原因：${result.msg}`
          this.btnLoading = false
        }
      } catch (e) {
        console.log(currentList, e)
        this.text = `导入失败错误范围[${total - length},${
          total - length + this.limit
        }],错误原因：${e}`
        this.btnLoading = false
      }
    },
    handleClick () {
      if (!this.btnLoading) {
        this.globalLoading = false
        this.$refs['excelModalRef'].handlCancel()
      }
    }
  }
}
</script>
<style></style>
